import { WeaCheckbox, WeaAvatar, WeaLocaleProvider } from 'ecCom';
import InnerHref from '../../../util/InnerHref';
import { createReplyBottomAtt, replaceFun } from '../../../util/CoworkUtil';
import CommentList from './CommentList';
import isFunction from 'lodash/isFunction';
import CoworkRichText from '../../../public/CoworkRichText';
import { Modal } from 'antd';
import QuoteItem from './QuoteItem';
import { routerShape } from 'react-router';

const getLabel = WeaLocaleProvider.getLabel;

const createBottomOperate = (text, icon, func) => (
  <span className="icon" onClick={func}>
    <i className={icon} />
    <span className="text">{text}</span>
  </span>
);

class ReplyItem extends React.Component {
  static contextTypes = {
    router: routerShape,
  };

  constructor(props) {
    super(props);
    this.state = {
      edit: false,
      editType: '',
      editValues: {},
      value: '1',
    };
  }

  render() {
    const {
      approvalAtatus,
      discussantInfo = {},
      remark,
      floorNum,
      showDate,
      id,
      quoteVo,
      commonList,
      zanCount,
      batchOperate,
      checked,
      hasCoworkHref,
      coworkid,
      name,
      canReply,
    } = this.props;
    const {
      isAnonymous,
      isMeCollected,
      isMeZaned,
      istop,
      isCanAnonymous,
      itemapprovalAtatus,
      isCoworkTypeApprove,
    } = this.props;
    const {
      op_isCanCollect,
      op_isCanDelete,
      op_isCanDoApprove,
      op_isCanEdit,
      op_isCanQuotes, // 引用
      op_isCanReply,
      op_isCanTop,
      op_isCanZan,
    } = this.props;
    const {
      relatedaccList4E9 = [],
      relatedcusList4E9 = [],
      relateddocList4E9 = [],
      relatedprjList4E9 = [],
      relatedwfList4E9 = [],
      relatemutilprjs4E9 = [],
    } = this.props;
    let { edit, editType, editValues } = this.state;
    let headerProps = {
      name: discussantInfo.lastname,
      url: discussantInfo.messagerurl,
      ...discussantInfo,
    };
    return (
      <div className="wea-cowork-reply-item">
        {(!edit || editType != 'edit') && (
          <div>
            {batchOperate && (
              <div className="cowork-reply-checkbox">
                <WeaCheckbox
                  ecId={`${
                    (this && this.props && this.props.ecId) || ''
                  }_WeaCheckbox@4sea0a`}
                  onChange={this.check}
                  value={checked}
                />
              </div>
            )}
            <div className="cowork-reply-header">
              <WeaAvatar
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_WeaAvatar@uf7pbe`}
                {...headerProps}
                style={{ width: 40, height: 40 }}
              />
            </div>
            <div
              className="cowork-reply-content"
              style={
                batchOperate ? { paddingLeft: '80px' } : { paddingLeft: '53px' }
              }
            >
              <div>
                <span className="cowork-reply-user">
                  {isAnonymous == 1 ? (
                    <span>{discussantInfo.lastname}</span>
                  ) : (
                    <a
                      href={`javaScript:openhrm(${discussantInfo.id});`}
                      onClick={window.pointerXY}
                    >
                      {discussantInfo.lastname}
                    </a>
                  )}
                </span>
                {hasCoworkHref && (
                  <span className="cowork-href">
                    <span>{getLabel(83258, '相关主题')}</span>
                    <a
                      href={InnerHref.coworkSingleHref(coworkid)}
                      target="_blank"
                    >
                      {name}
                    </a>
                  </span>
                )}
                <span className="fr">
                  {istop == 1 && <span className="fr-top">Top</span>}
                  {op_isCanCollect == 1 &&
                    (isMeCollected == 1 ? (
                      <span
                        className="cowork-top-icon icon-cooperation-follow"
                        onClick={this.collect}
                        title={getLabel(28111, '收藏')}
                      />
                    ) : (
                      <span
                        className="cowork-top-icon icon-cooperation-follow-o"
                        onClick={this.collect}
                        title={getLabel(28111, '收藏')}
                      />
                    ))}
                  #{floorNum}
                </span>
              </div>
              <div className="cowork-reply-remark">
                {quoteVo && (
                  <QuoteItem
                    ecId={`${
                      (this && this.props && this.props.ecId) || ''
                    }_QuoteItem@iw4ua3`}
                    {...quoteVo}
                  />
                )}
                <div
                  className="wea-cl-content"
                  dangerouslySetInnerHTML={{
                    __html: `<div class="wea-ckeditor-content">${replaceFun(
                      remark,
                    )}</div>`,
                  }}
                />
                {approvalAtatus == '1' && (
                  <span className="wait-approve">
                    {getLabel(83261, '等待管理员审批')}
                  </span>
                )}
              </div>
              <div>
                {createReplyBottomAtt(
                  'icon-portal-content-o',
                  getLabel(857, '相关文档'),
                  relateddocList4E9,
                )}
                {createReplyBottomAtt(
                  'icon-portal-Workflow-o',
                  getLabel(1044, '相关流程'),
                  relatedwfList4E9,
                )}
                {createReplyBottomAtt(
                  'icon-portal-crm-o',
                  getLabel(783, '相关客户'),
                  relatedcusList4E9,
                )}
                {createReplyBottomAtt(
                  'icon-portal-project',
                  getLabel(782, '相关项目'),
                  relatemutilprjs4E9,
                )}
                {createReplyBottomAtt(
                  'icon-coms-Approval-o',
                  getLabel(33414, '相关任务'),
                  relatedprjList4E9,
                )}
                {createReplyBottomAtt(
                  'icon-coms-currency-Enclosure',
                  getLabel(22194, '相关附件'),
                  relatedaccList4E9,
                  true,
                )}
              </div>
              <div className="bottom-operate">
                <span className="reply-time">{showDate}</span>
                <div className="fr">
                  {op_isCanEdit == 1 &&
                    canReply &&
                    createBottomOperate(
                      getLabel(93, '编辑'),
                      'icon-cooperation-edit',
                      this.edit,
                    )}
                  {op_isCanDelete == 1 &&
                    createBottomOperate(
                      getLabel(91, '删除'),
                      'icon-cooperation-delete',
                      this.del,
                    )}
                  {op_isCanDoApprove == 1 &&
                    createBottomOperate(
                      getLabel(142, '批准'),
                      'icon-coms-Approval-o',
                      this.approve,
                    )}
                  {op_isCanQuotes == 1 &&
                    canReply &&
                    createBottomOperate(
                      getLabel(19422, '引用'),
                      'icon-cooperation-Quote',
                      this.quote,
                    )}
                  {op_isCanReply == 1 &&
                    canReply &&
                    createBottomOperate(
                      getLabel(675, '评论'),
                      'icon-coms-New-SMS',
                      this.comment,
                    )}
                  {op_isCanTop == 1 || op_isCanTop == 2
                    ? createBottomOperate(
                        getLabel(83262, '置顶'),
                        'icon-cooperation-top',
                        this.setTop,
                      )
                    : null}
                  {op_isCanTop == 2
                    ? createBottomOperate(
                        getLabel(24675, '取消置顶'),
                        'icon-cooperation-top',
                        this.cancelTop,
                      )
                    : null}
                  {op_isCanZan == 1 &&
                    (isMeZaned == 1
                      ? createBottomOperate(
                          `${getLabel(382631, '已点赞')}(${zanCount})`,
                          'icon-coms-satisfaction',
                          this.zan,
                        )
                      : createBottomOperate(
                          `${getLabel(32942, '赞')}(${zanCount})`,
                          'icon-coms-Good',
                          this.zan,
                        ))}
                </div>
                <div className="clear-both" />
              </div>
              {Array.isArray(commonList) && commonList.length > 0 && (
                <CommentList
                  ecId={`${
                    (this && this.props && this.props.ecId) || ''
                  }_CommentList@9u762v`}
                  operate={this.props.operate}
                  list={commonList}
                  submit={this.props.submit}
                  topdiscussid={id}
                  isCanAnonymous={isCanAnonymous}
                  canReply={canReply}
                />
              )}
            </div>
          </div>
        )}
        {edit && canReply && (
          <CoworkRichText
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_CoworkRichText@hgtwci`}
            hasSubmit={true}
            ref="richText"
            submit={this.submit}
            cancel={this.cancel}
            // noBottomInfo={editType == 'comment'}
            isCanAnonymous={isCanAnonymous}
            approvalStatus={itemapprovalAtatus}
            editType={editType}
            isCoworkTypeApprove={editType == 'edit' ? isCoworkTypeApprove : ''}
            {...editValues}
          />
        )}
      </div>
    );
  }
  collect = () => {
    this.operate('collect');
  };
  edit = () => {
    const {
      relatedaccList4E9 = [],
      relatedcusList4E9 = [],
      relateddocList4E9 = [],
      relatedprjList4E9 = [],
      relatedwfList4E9 = [],
      relatemutilprjs4E9 = [],
    } = this.props;
    this.setState({
      edit: true,
      editType: 'edit',
      editValues: {
        richValue: this.props.remark,
        anonymous: this.props.isAnonymous,
        relatedaccList4E9,
        relatedcusList4E9,
        relateddocList4E9,
        relatedprjList4E9,
        relatedwfList4E9,
        relatemutilprjs4E9,
      },
    });
  };
  del = () => {
    let that = this;
    Modal.confirm({
      content: (
        <div className="wea-list-confirm">
          <p>{getLabel(25405, '确认要删除该讨论记录?')}</p>
          <div className="list-confirm-text">
            <WeaCheckbox
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_WeaCheckbox@a6zm7i`}
              onChange={this.valueChange}
              value={that.state.value}
            />
            {getLabel(4828, '同时删除该帖子的所有评论?', 'note')}
          </div>
        </div>
      ),
      onOk() {
        let { value } = that.state;
        that.operate('delDiscuss', value);
      },
    });
  };
  valueChange = (value) => {
    this.setState({
      value,
    });
  };
  approve = () => {
    this.operate('doApproveDiscuss');
  };
  quote = () => {
    this.setState({
      edit: true,
      editType: 'quote',
    });
  };
  comment = () => {
    this.setState({
      edit: true,
      editType: 'comment',
    });
  };
  setTop = () => {
    this.operate('dotop');
  };
  cancelTop = () => {
    this.operate('canceltop');
  };
  zan = () => {
    this.operate('agree');
  };
  // 操作类型(dotop:置顶;canceltop:取消置顶;doApproveDiscuss:审批协作留言;collect:收藏;delComment:删除评论;delDiscuss:删除交流;agree:赞)
  operate = (type, value) => {
    isFunction(this.props.operate) &&
      this.props.operate({
        id: this.props.id,
        coworkId: this.props.coworkid,
        operationType: type,
        isDeleteAll: type == 'delDiscuss' ? parseInt(value) : '',
      });
  };

  submit = (params, callback) => {
    let { editType } = this.state;
    let saveParams = { ...params };
    if (editType == 'edit') {
      saveParams.id = this.props.id;
    } else {
      saveParams.replyType = editType;
      saveParams.topdiscussid = this.props.id;
      saveParams.replayid || (saveParams.replayid = this.props.id);
    }
    return (
      isFunction(this.props.submit) &&
      this.props.submit(saveParams, this.cancel(callback))
    );
  };
  cancel = (callback) => {
    // this.refs.richText.wrappedInstance.clear();
    this.setState({
      edit: false,
      editType: '',
      editValues: {},
    });
    isFunction(callback) && callback();
  };
  check = (bool) => {
    isFunction(this.props.check) && this.props.check(this.props.id, bool);
  };
  chooseCowork = (id) => {
    let { router } = this.context;
    if (router) {
      router.push(InnerHref.cowork(id));
    }
  };
}

export default ReplyItem;
